<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" /> 
	<title>Document</title>
	<link rel="stylesheet" href="css/flexible.css"/>
	<link rel="stylesheet" href="css/iconfont.css">
	<style type="text/css">
	*{
		font-family: '微软雅黑';
	}
	body{
		height: 15rem;
	}
	header{
		width: 100%;
		height: 1.333333rem;
		border-bottom: 1px #beb3b6 solid;
		background-color: transparent;
		text-align: center;
		line-height: 1.333333rem;
		
	}
	header div{
		width:100%;
		font-size: .493333rem;
		background-color: #55a2f0;
		color: #fff;
		text-align: center;
		border: none;
		position:fixed;
		z-index: 99;
	}
	footer{
		height: 1.173333rem;
	}
	.footer-content{
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 1.173333rem;
		background-color: #f9f9f9 ;
		display: flex;
		align-items: center;
		justify-content: space-around;
	}
	.footer-content button{
		width: .733333rem;
		height: 1rem;
		background-color: transparent;
		border: none;
		padding: 0;
		font-size: .226667rem;
		text-align: center;
	}
	.map{
		width:100%;
		height: 100%;
		border:#ccc solid 1px;
		font-size:12px;
	}
	</style>
	<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=46txAv6k5xigRuf7rS4Q0Vo9SZpAkGFZ"></script>
	</head>
	<body>
	<header>
		<div>西安</div>
	</header>
	<div class="map" id="map"></div>
	<footer>
		<div class="footer-content">
				<button>
						<i class="iconfont">&#xe635;</i>
						<span>主页</span>
					</button>
					<button>
						<i class="iconfont">&#xe617;</i>
						<span>地图</span>
					</button>
					<button>
						<i class="iconfont">&#xe608;</i>
						<span>我的</span>
					</button>
		</div>
	</footer>
	<script src="js/flexible.js"></script>
	<script>
		    //创建和初始化地图函数：
				function initMap(){
        createMap();//创建地图
        setMapEvent();//设置地图事件
        addMapControl();//向地图添加控件
        addMapOverlay();//向地图添加覆盖物
    }
    function createMap(){
        map = new BMap.Map("map");
        map.centerAndZoom(new BMap.Point(108.93, 34.27),11);
    }
    function setMapEvent(){
        map.enableScrollWheelZoom();
        map.enableDragging();
        map.enableDoubleClickZoom()
    }
    function addClickHandler(target,window){
        target.addEventListener("click",function(){
            target.openInfoWindow(window);
        });
    }
    function addMapOverlay(){
        var markers = [
            {content:"水质检测级别：优秀 污染级别：无污染 经度：109.02  纬度：34.41",title:"监测点",imageOffset: {width:0,height:3},position:{lat:34.419743,lng:109.024286}},
            {content:"水质检测级别：较差 污染级别：污染   经度：109.02  纬度：34.41",title:"监测点",imageOffset: {width:0,height:3},position:{lat:34.358734,lng:108.688535}}
        ];
        for(var index = 0; index < markers.length; index++ ){
            var point = new BMap.Point(markers[index].position.lng,markers[index].position.lat);
            var marker = new BMap.Marker(point,{icon:new BMap.Icon("http://api.map.baidu.com/lbsapi/createmap/images/icon.png",new BMap.Size(20,25),{
                    imageOffset: new BMap.Size(markers[index].imageOffset.width,markers[index].imageOffset.height)
                })});
            var label = new BMap.Label(markers[index].title,{offset: new BMap.Size(25,5)});
            var opts = {
                width: 200,
                title: markers[index].title,
                enableMessage: false
            };
            var infoWindow = new BMap.InfoWindow(markers[index].content,opts);
            marker.setLabel(label);
            addClickHandler(marker,infoWindow);
            map.addOverlay(marker);
        };
        var labels = [
            {position:{lng:109.024286,lat:34.419743},content:""}
        ];
        for(var index = 0; index < labels.length; index++){
            var opt = { position: new BMap.Point(labels[index].position.lng,labels[index].position.lat )};
            var label = new BMap.Label(labels[index].content,opt);
            map.addOverlay(label);
        };
    }
    //向地图添加控件
    function addMapControl(){
        var scaleControl = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT});
        scaleControl.setUnit(BMAP_UNIT_IMPERIAL);
        map.addControl(scaleControl);
        var navControl = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE});
        map.addControl(navControl);
        var overviewControl = new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:true});
        map.addControl(overviewControl);
    }
    var map;
    initMap();
	</script>
	</body>
</html>